<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!-- 兼容移动端和PC端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{../css/semantic-UI/semantic.min.css}">
    <link rel="stylesheet" th:href="@{../css/me.css}">
    <title>标签管理</title>
    <style>
        .main{
            margin: 0 0 0 0;
            overflow: hidden;
        }
        .form_1{
            width:400px;
            height:300px;
            border:3px solid #f8f8f8;
            visibility: hidden;
            position: absolute;
            z-index: 999;
            opacity: 1;
            overflow: hidden;
            background-color: rgba(255,255,255,0.8);
            text-align: center;
            margin-top: 10%;
            margin-left: 35%;
            border-radius: 10px;

            margin: 30px 205px;
        }
        .open{
            visibility: visible;
            opacity: 1;
        }
        .input_1{
            margin-top: 15px;
            width:100%;
            height:40px;

        }
        input{
            width:280px;
            height:30px;
            border-radius: 5px;
            border:1px solid  #e5dfdf;
        }
        .input_1 .login_logo{
            text-align: left;
            font-size: 20px;
            font-weight: 300;
            padding-left: 30px;
            float: left;
        }
        .input_1 .close{
            width:20px;
            height:20px;
            color:#5d5d5d;
            text-align: center;
            line-height: 20px;
            border:1px solid  #5d5d5d;
            border-radius: 50%;
            float: right;
            padding-top: 0px;
            margin-right: 10px;
            font-size: 12px;
        }
        .input_1 .close:hover{
            cursor:pointer;
        }
        .input_1 .submit_1{
            border:2px solid #f88020;
            height:40px;
            background-color: white;
        }
        .input_1 .submit_1:hover{
            background-color: #f88020;
            color:white;
        }

        #form2{
            padding: 0 0 0 0;
        }

    </style>
</head>
<body>
    <!-- 导航 -->
    <!-- inverted 反转   attached 没有圆角 -->
    <nav th:replace="admin/_fragment::menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <!-- stackable屏幕下的时候可堆叠的 适应手机端 -->
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">博客管理</h2>
                <!-- 标签加了mini之后   火狐正常显示 edge错位显示  所以加上small -->
                <a href="#" class="active item m-item m-mobile-hide"><i class="small home icon"></i>首页</a>
                <a href="#" class="item m-item m-mobile-hide"><i class="small idea icon"></i>分类</a>
                <a href="#" class="item m-item m-mobile-hide"><i class="small tags icon"></i>标签</a>
                
                <div class="right menu">
                    <div class="ui dropdown m-item m-mobile-hide item">
                        <div class="text" >
                            <img src="https://picsum.photos/id/103/100/100" alt="" class="ui avatar image">
                            陈楷
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" th:href="@{/admin/tinput}" class="item">发布</a>
                <a href="#" th:href="@{/admin/tags}" class="active item teal">列表</a>
            </div>
        </div>
    </div>
    

    <!-- 中间容器 -->
    <div class="m-padded-tb-big m-container-small">
        <div class="ui container">

            <!--分类添加提示框-->
            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                <i class="close icon"></i>
                <div class="header">提示</div>
                <p th:text="${message}"></p>
            </div>

            <table class="ui table compact teal">
                    <thead>
                        <tr>
                            <th></th>
                            <th>标题</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody th:each="tag,iterStat : ${page.content}">
                        <tr>
                            <div class="main">
                                <!--                <button id="btn_1"> 弹 框 输 入</button>-->
                                <div class="form_1">
                                    <form id="form2" th:action="@{/admin/addtags/{id}(id=${tagid})}" method="post">
                                        <div class="input_1"><div class="login_logo">分类编辑</div><div class="close">X</div></div>
                                        <hr>
                                        <div class="input_1"><input type="text" name="id" placeholder="分类编号" th:value="${tag.id}" disabled></div>
                                        <div class="input_1"><input type="text" name="name" id="name" placeholder="分类名称" th:value="${tag.name}"></div>
                                        <div class="input_1"><input class="submit_1" id="btn" type="submit" value="修&nbsp;改"></div>
                                    </form>
                                </div>
                            </div>
                            <td th:text="${tag.id}">1</td>
                            <td th:text="${tag.name}">江西龙头</td>
                            <td>
                                  <!--th:href="@{/admin/types/{id}/input(id=${type.id})}"-->
                                  <a href="#"  id="btn_1" class="ui button basic teal mini">编辑</a>
                                  <a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}"  class="ui button basic red mini">删除</a>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="6">
                                <div th:if="${page.totalPages} > 1" class="ui mini pagination menu">
                                    <!--如果页面是第一页 则不显示第一页  -->
                                    <a href="#" th:href="@{/admin/tags(page=${page.number}-1)}" th:unless="${page.first}"
                                       class=" item">
                                        上一页
                                    </a>
                                    <a href="#" th:href="@{/admin/tags(page=${page.number}+1)}" th:unless="${page.last}"
                                       class=" item">
                                        下一页
                                    </a>
                                </div>
                                <a th:href="@{/admin/tinput}" class="ui teal right floated  basic button">新增</a>
                            </th>
                        </tr>
                    </tfoot>
            </table>

            
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>



    <!-- 底部footer -->
    <footer th:replace="admin/_fragment::footer" class="ui  inverted vertical segment m-footer-padding-tb-massive">
        <div class="ui center aligned container   ">
            <div class="ui inverted divided stackable grid">
                <!--二维码-->
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img th:src="@{../image/WeChat.jpg}" class="ui rounded image"
                                 style="width: 110px" alt=""/>
                        </div>
                    </div>
                </div>
                <!--文字-->
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">江西龙头的故事</a>
                        <a href="#" class="item">陈楷的风光一生</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Emall:1240863484@qq.com</a>
                        <a href="#" class="item">QQ:1240863484</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">博客简介</h4>
                    <p class="m-text-thin m-text-spaced  m-opacity-mini">
                        这是我的个人博客、会分享关于编程、写作、思考相关的任何内容、希望可以给来到这儿的人有所帮助...
                    </p>
                </div>
            </div>
            <div class="ui inverted section divider">
            <br>
            <br>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">
                Copyright © 2022 - 06 - 01 Lirenmi Designed by Lirenmi
            </p>
            </div>
        </div>
    </footer>

<!--/*/<th:block th:replace="admin/_fragment :: script">/*/-->
<script th:src="@{../js/Jquery.js}"></script>
<script th:src="@{../css/semantic-UI/semantic.min.js}"></script>
<!--/*/</th:block>/*/-->

<script>
$('.menu.toggle').click(function(){
    //点击这个按钮去除css中的m-mobile-hide样式
    $('.m-item').toggleClass('m-mobile-hide');
});

$('.ui.dropdown').dropdown({
        on: 'hover'
});

//消息提示关闭初始化
$('.message .close').on('click', function () {
    $(this).closest('.message').transition('fade');
})

window.onload=function(){
    var btn_1=document.getElementById("btn_1");
    var close=document.getElementsByClassName("close");
    var form_1=document.getElementsByClassName("form_1");
    btn_1.addEventListener('click',function(){
        form_1[0].className="form_1 open";
    })
    close[0].addEventListener('click',function(){
        form_1[0].className="form_1";
    })
};

$(function () {
    $("#name").blur(function () {
        $.ajax({
            url:"/admin/tname",
            type: "get",
            data: {"name":$("#name").val()},
            dataType:"json",
            success:function (data) {
                if(data.toString()=="true"){
                    // alert("分类不存在")
                    $("#btn").attr("disabled",false);
                }else {
                    alert("标签已经存在，请重新输入后在提交")
                    //设置按钮不可提交
                    $("#btn").attr("disabled",true);
                }
            }
        });
    });
});
</script>

</body>
</html>